<template>
  <div v-title data-title="产品规格地图">
    <div class="cascade">
      <div class="projec-class-box clearFix">
        <div class="projec-class-lable m120">包装材质：</div>
        <ul class="projec-class-list clearFix">
          <li
            v-for="item of packingMaterialList"
            :key="item.code"
            :class="['hoverShow', { active: packingMaterial == item.code }]"
            @click="handleToggle(item.code, 'packingMaterial')"
          >
            {{ item.name }}
          </li>
        </ul>
      </div>
      <div class="projec-class-box clearFix" :class="{ 'project-class-more': more.moreRef1Class }" ref="moreRef1">
        <div class="projec-class-lable m120">规格：</div>
        <ul class="projec-class-list clearFix" :class="{ 'projec-class-list-more': more.moreRef1 }">
          <li
            v-for="item of productSpecList"
            :key="item.code"
            :class="['hoverShow', { active: productSpec == item.code }]"
            @click="handleToggle(item.code, 'productSpec')"
          >
            {{ item.name }}
          </li>
        </ul>
        <div class="btn-more" @click="changeMore('moreRef1')">
          更多<a-icon
            :class="['icon-child-down', { 'icon-child-up': more.moreRef1 }]"
            slot="suffixIcon"
            type="caret-up"
          />
        </div>
      </div>
      <div class="projec-class-box clearFix">
        <div class="projec-class-lable m120">产品大类：</div>
        <ul class="projec-class-list clearFix">
          <li
            v-for="item of productCategoryList"
            :key="item.code"
            :class="['hoverShow', { active: productCategory == item.code }]"
            @click="handleToggle(item.code, 'productCategory')"
          >
            {{ item.name }}
          </li>
        </ul>
      </div>
      <div class="projec-class-box clearFix">
        <div class="projec-class-lable m120">产品：</div>
        <ul class="projec-class-list clearFix">
          <li
            v-for="item of htProductList"
            :key="item.code"
            :class="['hoverShow', { active: htProduct == item.code }]"
            @click="handleToggle(item.code, 'htProduct')"
          >
            {{ item.name }}
          </li>
        </ul>
      </div>
    </div>
    <div class="table-map">
      <a-row style="margin-bottom: 15px">
        <a-col :span="6">
          <a-input-search
            placeholder="输入成品名称/材质/规格进行搜索"
            v-model="keyword"
            @search="handleSearch"
            allowClear
          />
        </a-col>
      </a-row>
      <a-table
        class="hte-table-content"
        :columns="levelColumns"
        :data-source="listData"
        :rowKey="
          (record, index) => {
            return index
          }
        "
        :loading="tableLoading"
        :pagination="ipagination"
        bordered
        @change="handleTableChange"
        :footer="handleFooterShow"
      >
        <template slot="spec150" slot-scope="text">
          <div class="status-point" v-if="text"></div>
        </template>
      </a-table>
    </div>
  </div>
</template>

<script>
import { ResizeHandleMoreMixin } from '@/mixins/ResizeHandleMoreMixin'
import { getAction, postAction, downloadFileLink } from '@/api/manage'
import Vue from 'vue'

export default {
  name: 'TaskHome',
  mixins: [ResizeHandleMoreMixin],
  data() {
    return {
      packingMaterialList: [],
      productCategoryList: [],
      productSpecList: [],
      htProductList: [],
      levelColumns: [
        {
          title: '产品名称',
          dataIndex: 'productName',
          key: 'productName',
          width: '15%',
          align: 'center',
        },
        {
          title: '数量',
          dataIndex: 'productNum',
          key: 'projectNum',
          align: 'center',
          width: '10%',
          sorter: (a, b) => a.productNum - b.productNum,
        },
        {
          title: '规格',
          children: [
            {
              title: '150ml',
              dataIndex: 'spec150',
              key: 'spec150',
              width: 100,
              align: 'center',
              scopedSlots: { customRender: 'spec150' },
            },
            {
              title: '200ml',
              dataIndex: 'spec200',
              key: 'spec200',
              width: 100,
              align: 'center',
              scopedSlots: { customRender: 'spec150' },
            },
            {
              title: '250ml',
              dataIndex: 'spec250',
              key: 'spec250',
              width: 100,
              align: 'center',
              scopedSlots: { customRender: 'spec150' },
            },
            {
              title: '380ml',
              dataIndex: 'spec380',
              key: 'spec380',
              width: 100,
              align: 'center',
              scopedSlots: { customRender: 'spec150' },
            },
            {
              title: '410ml',
              dataIndex: 'spec410',
              key: 'spec410',
              width: 100,
              align: 'center',
              scopedSlots: { customRender: 'spec150' },
            },
            {
              title: '450ml',
              dataIndex: 'spec450',
              key: 'spec450',
              width: 100,
              align: 'center',
              scopedSlots: { customRender: 'spec150' },
            },
            {
              title: '480ml',
              dataIndex: 'spec480',
              key: 'spec480',
              width: 100,
              align: 'center',
              scopedSlots: { customRender: 'spec150' },
            },
            {
              title: '500ml',
              dataIndex: 'spec500',
              key: 'spec500',
              width: 100,
              align: 'center',
              scopedSlots: { customRender: 'spec150' },
            },
            {
              title: '750ml',
              dataIndex: 'spec750',
              key: 'spec750',
              width: 100,
              align: 'center',
              scopedSlots: { customRender: 'spec150' },
            },
          ],
        },
      ],
      listData: [],
      tableLoading: false,
      ipagination: {
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30', '50'],
        showTotal: (total, range) => {
          return ' 共' + total + '条'
        },
        showQuickJumper: true,
        showSizeChanger: true,
        hideOnSinglePage: false,
        total: 0,
      },
      keyword: '',
      packingMaterial: '',
      productCategory: '',
      productSpec: '',
      htProduct: '',
      url: {
        codeInfoList: '/manage/codeInfo/list',
      },
    }
  },
  mounted() {
    this.initCodeInfo()
    this.initData()
  },
  methods: {
    initCodeInfo() {
      getAction(this.url.codeInfoList, {
        type: '包装材质',
        pageNo: 1,
        pageSize: -1,
        isdel: 0,
        column: 'code',
        order: 'asc',
      })
        .then((res) => {
          if (res.code == 200 && res.result && res.result.records) {
            this.packingMaterialList = res.result.records || []
            this.packingMaterialList.splice(0, 0, {
              code: '',
              name: '全部',
              type: '包装材质',
              isdel: '0',
              parentid: '',
            })
          } else {
            this.$message.warning('查询包装材质失败:' + res.message)
          }
        })
        .catch((res) => {
          this.$message.warning('查询包装材质失败:' + res.message)
        })
      getAction(this.url.codeInfoList, {
        type: '产品规格',
        pageNo: 1,
        pageSize: -1,
        isdel: 0,
        column: 'code',
        order: 'asc',
      })
        .then((res) => {
          if (res.code == 200 && res.result && res.result.records) {
            this.productSpecList = res.result.records || []
            this.productSpecList.splice(0, 0, { code: '', name: '全部', type: '产品规格', isdel: '0', parentid: '' })
          } else {
            this.$message.warning('查询产品规格失败:' + res.message)
          }
        })
        .catch((res) => {
          this.$message.warning('查询产品规格失败:' + res.message)
        })
      getAction(this.url.codeInfoList, {
        type: '产品大类',
        pageNo: 1,
        pageSize: -1,
        isdel: 0,
        column: 'code',
        order: 'asc',
      })
        .then((res) => {
          if (res.code == 200 && res.result && res.result.records) {
            this.productCategoryList = res.result.records || []
            this.productCategoryList.splice(0, 0, {
              code: '',
              name: '全部',
              type: '产品大类',
              isdel: '0',
              parentid: '',
            })
          } else {
            this.$message.warning('查询产品大类失败:' + res.message)
          }
        })
        .catch((res) => {
          this.$message.warning('查询产品大类失败:' + res.message)
        })
      getAction(this.url.codeInfoList, {
        type: '海天产品',
        pageNo: 1,
        pageSize: -1,
        isdel: 0,
        column: 'code',
        order: 'asc',
      })
        .then((res) => {
          if (res.code == 200 && res.result && res.result.records) {
            this.htProductList = res.result.records || []
            this.htProductList.splice(0, 0, { code: '', name: '全部', type: '海天产品', isdel: '0', parentid: '' })
          } else {
            this.$message.warning('查询海天产品失败:' + res.message)
          }
        })
        .catch((res) => {
          this.$message.warning('查询海天产品失败:' + res.message)
        })
    },
    handleToggle(code, codeRef, type) {
      if (this.tableLoading) {
        return
      }
      this[codeRef] = code
      this.initData()
    },
    handleTableChange(pagination, filters, sorter) {
      if (this.tableLoading) {
        return
      }
      this.ipagination = pagination
      this.ipagination.pageNo = this.ipagination.current
      this.initData()
    },
    handleSearch() {
      if (this.tableLoading) {
        return
      }
      this.ipagination.current = 1
      this.initData()
    },
    initData() {
      if (this.tableLoading) {
        return
      }
      this.tableLoading = true
      getAction('/techProjectReport/productSpecMapList', {
        keyword: this.keyword,
        packingMaterial: this.packingMaterial,
        productSpec: this.productSpec,
        productCategory: this.productCategory,
        htProduct: this.htProduct,
        pageNo: this.ipagination.current,
        pageSize: this.ipagination.pageSize,
      })
        .then((res) => {
          if (res.code === 200 && res.result) {
            //this.listData = res.result.records
            this.listData = [
              { productName: 'QAQ', productNum: 10, spec150: 1 },
              { productName: 'QAQ2', productNum: 5, spec410: 1 },
            ]
            this.ipagination.total = res.result.total
          } else {
            this.$message.error(res.message)
            this.ipagination.total = 0
          }
          this.tableLoading = false
        })
        .catch((res) => {
          this.tableLoading = false
        })
    },
    handleFooterShow (data) {
      if (data.length == 0) {
        return
      }
      let arr = []
      let obj = {}
      obj.productName ='合计'
      let sum = new Array(10).fill(0);
      for (let index = 0; index < data.length; index++) {
        const element = data[index];
        
        sum[0] += sum[0] + element.productNum ? parseInt(element.productNum): 0
        sum[1] += sum[1] + element.spec150 ? parseInt(element.spec150): 0
        sum[2] += sum[2] + element.spec200 ? parseInt(element.spec200): 0
        sum[3] += sum[3] + element.spec250 ? parseInt(element.spec250): 0
        sum[4] += sum[4] + element.spec380 ? parseInt(element.spec380): 0
        sum[5] += sum[5] + element.spec410 ? parseInt(element.spec410): 0
        sum[6] += sum[6] + element.spec450 ? parseInt(element.spec450): 0
        sum[7] += sum[7] + element.spec480 ? parseInt(element.spec480): 0
        sum[8] += sum[8] + element.spec500 ? parseInt(element.spec500): 0
        sum[9] += sum[9] + element.spec750 ? parseInt(element.spec750): 0
      }
      obj.productNum = sum[0]
      obj.spec150 = sum[1] ? sum[1] : ''
      obj.spec200 = sum[2] ? sum[2] : ''
      obj.spec250 = sum[3] ? sum[3] : ''
      obj.spec380 = sum[4] ? sum[4] : ''
      obj.spec410 = sum[5] ? sum[5] : ''
      obj.spec450 = sum[6] ? sum[6] : ''
      obj.spec480 = sum[7] ? sum[7] : ''
      obj.spec500 = sum[8] ? sum[8] : ''
      obj.spec750 = sum[9] ? sum[9] : ''

      arr.push(obj)
      return (
        <a-table
          rowKey={Math.random}
          pagination={false}
          columns={this.levelColumns}
          dataSource={arr}
          showHeader={false}
          class="hte-table-content"
        ></a-table>
      );
    }
  },
}
</script>

<style lang="less" scoped>
@import '../productCycle.less';
.cascade {
  margin: 18px 0 20px 0 !important;
}
.table-map {
  background-color: #fff;
  padding: 15px;
}
.status-point {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #1ba014;
}
/deep/ .ant-table-footer{
  padding: 0px;
}
</style>